<template>
    <el-card shadow="never" v-loading="loading" class="smart-reply-container">
        <el-tabs v-model="activeName" @tab-change="handleTabsChange">
            <el-tab-pane label="私聊自动回复" name="privateChat" />
            <el-tab-pane label="群聊自动回复" name="groupChat" />
        </el-tabs>

        <Search ref="replySearchRef" :reply-type="activeName" @search="onSearch" @reset="onReset" @create="onCreate" />
        <Table :key="activeName" v-model:loading="loading" ref="replyTableRef" :reply-type="activeName" :fetch-params="state.search" />
    </el-card>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'SMART_REPLY_LIST' });
</script>
<script lang="tsx" setup>
import { nextTick, ref, onActivated, onMounted } from 'vue'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { store } from '@renderer/store'
import { advancedShow } from '@renderer/ajax/api/groupMonitor'

import Table from './components/table.vue'
import Search from './components/search.vue'
import { ElMessage } from 'element-plus';
const router = useRouter()
const state = reactive<{ search: IFormData }>({
    search: {
        titleKeyword: "",
        createAt: [],
        status: 0,// 0 全部，1。 启用 2 关闭
        replyType: 0,// 0 全部， 1 全部 2 随机
    }
})


const loading = ref(false)
const onSearch = (v: any) => {
    state.search = {
        ...state.search,
        ...v,
        status: v.status || 0,
        replyType: v.replyType || 0
    }
}
const onReset = (v: any) => {
    state.search = { ...state.search, ...v }
}

const activeName = ref('privateChat')

const replyTableRef = ref()
const replySearchRef = ref()
const handleTabsChange = async () => {
    // 刷新列表
    await nextTick()
    replySearchRef.value?.reset()
}


const onCreate = async () => {
    // 获取基本配置信息，appkey和appsecret.
    let info = store.getters['common/getUserInfo']
    let parasm = {
        CorpId: info.CorpID
    }
    let res: any = await advancedShow(parasm)
    // 判断一下是否都有才可以新建
    if (res.AppKey && res.AppSecret) {
        // 打开新增页面
        router.push({
            path: '/smartReply/create',
            query: {
                type: activeName.value
            }
        })
        return
    }
    ElMessage.warning('请先到首页-高级配置完成基本信息配置！')
}

let isFirst = false;
onActivated(() => {
    if (isFirst) {
        isFirst = false;
        return;
    }
    replyTableRef.value?.refresh()
})

onMounted(() => {
    isFirst = true
})



/**
 * 搜索表单数据类型
 */
interface IFormData {
    /** 规则名称 ｜ 标题 */
    titleKeyword: string,
    /** 创建的时间 */
    createAt: any[],
    /** 任务状态1：开启，2关闭  */
    status?: 0 | 1 | 2,
    /** 回复方式1：全部回复，2随机回复一条  */
    replyType?: 0 | 1 | 2,
}
</script>

<style scoped lang="scss">
.smart-reply-container {
    padding: 0 10px;

    :deep(.el-card__body) {
        padding: 0;
    }

    background: #fff;

    .buttons {
        margin-bottom: 12px;
    }
}</style>
